<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯课堂</title>
    <link rel="stylesheet" href="./styles/bootstrap4.5.0.min.css">
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/iconfont.css">
    <link rel="stylesheet" href="./styles/base.css">
</head>

<body>
    <header class="border-bottom">
        <!-- 顶栏 -->
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <a href="https://ke.qq.com/">
                        <img src="./images/website-logo.png" alt="" class="w-100">
                    </a>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                    <div class="col-md-3 classification d-flex align-items-center justify-content-center">
                        <span class="iconfont icon-fenlei"></span>
                        <a href="https://ke.qq.com/course/list" target="_blank" rel="noopener noreferrer">分类</a>
                    </div>
                    <div class="col-md-9 d-flex align-items-center justify-content-center search-block">
                        <span class="gary-border course-btn">课程</span>
                        <input type="text" class="gary-border search-input" placeholder="搜索课程">
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                </div>
                <div class="col-md-4">
                    <ul class="d-flex align-items-center justify-content-between top-right">
                        <li class="top-item">
                            <a href="javascript:void(0);">入驻/合作</a>
                        </li>
                        <li class="top-item extreme-edition">
                            <a href="javascript:void(0);">极速版</a>
                        </li>
                        <li class="top-item">
                            <a href="javascript:void(0);">客户端</a>
                        </li>
                        <li class="top-item">
                            <a href="javascript:void(0);">私信</a>
                        </li>
                        <li class="top-item user-info position-relative">
                            <a href="javascript:void(0);">
                                <img src="./images/avatar.png" alt="" class="avatar rounded-circle">
                                <span class="iconfont icon-qq position-absolute"></span>
                                <span class="nickname">叁贰壹</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <main>
        <!-- 幻灯片 -->
        <div class="course-and-carousel" id="carousel-container">
            <div class="container">
                <div class="row">
                    <div class="col-md-9 d-flex justify-content-center" id="carousel">
                        <div class="carousel-img" id="carousel-img"></div>
                        <span class="iconfont icon-left-line"></span>
                        <span class="iconfont icon-right-line"></span>
                    </div>
                    <div class="col-md-3 d-flex justify-content-center align-items-center">
                        <div class="w-100 shadow p-3 bg-white rounded course">
                            <!-- 头像 -->
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="javascript:void(0);">
                                    <img src="./images/avatar.png" alt="" class="avatar">
                                    <span class="nickname">叁贰壹</span>
                                </a>
                                <a href="javascript:void(0);" class="sign-out">退出</a>
                            </div>
                            <!-- 课程 -->
                            <div class="d-flex justify-content-between align-items-center favorites border-bottom">
                                <a href="javascript:void(0);"><span>25</span> 门课程</a>
                                <a href="javascript:void(0);"><span>0</span> 门收藏</a>
                            </div>
                            <!-- 直播 -->
                            <div class="live-today">
                                <a href="javascript:void(0);">
                                    <span class="live-title">十年工作经验助你突破学习困境【微课】</span>
                                    <span class="live-prompt">今日有直播</span><br>
                                    <span class="live-timer">8月28日 14:00-14:30</span>
                                </a>
                            </div>
                            <!-- 课表 -->
                            <div class="curriculum p-3 d-flex justify-content-center align-items-center">
                                <a href="javascript:void(0);">
                                    <span class="iconfont icon-paikebiao"></span>
                                    <span>我的课表</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="main-container">
            <div class="nav-bar border-bottom">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="col-md-8">
                            <ul class="d-flex justify-content-center align-items-center">
                                <li class="nav-item active-nav-item">
                                    <a href="javascript:void(0);">Java开发
                                        <!-- <span class="underline"></span> -->
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="javascript:void(0);">前端
                                        <!-- <span class="underline"></span> -->
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="javascript:void(0);">兴趣职场
                                        <!-- <span class="underline"></span> -->
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-2 d-flex justify-content-end align-items-center">
                            <a href="javascript:void(0);" class="modify-interest">修改兴趣</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 免费直播课 -->
            <div class="container free-live-lessons">
                <div class="row">
                    <div class="col-md-12 module-title d-flex justify-content-center">免费直播课</div>
                </div>
                <div class="row">
                    <div class="col-md-6 position-relative left">
                        <img src="./images/510.jpg" alt="" class="w-100">
                        <div class="forward-masking position-absolute">
                            <h5 class="lesson-name">从大厂的面试题来看ThreadLocal重要性</h5>
                            <div class="lesson-action-time rounded-pill">
                                距离上课<span class="hours">00</span>时<span class="miuntes">39</span>分<span class="seconds">36</span>秒
                            </div>
                            <a href="javascript:void(0);" class="see-details-btn rounded">
                                查看详情
                            </a>
                            <div class="row course-info d-flex justify-content-between">
                                <div class="col-md-6 teacher-info justify-content-start d-flex align-items-center">
                                    <div class="float-left">
                                        <img src="./images/avatar.png" alt="" class="teacher-avatar rounded-circle">
                                        <span class="teacher-name">叁贰壹</span>
                                    </div>
                                </div>
                                <div class="col-md-6 source-course">
                                    <a href="javascript:void(0);">来自课程: <span class="course-name">JAVA架构师严选课 互联网架构/分布式/高并发/微服务 【图灵学院】</span></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 right">
                        <ul class="course-list w-100">
                            <li class="list-item active-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                            <li class="list-item">
                                <a href="javascript:void(0);" class="d-flex align-items-center">
                                    <span class="item-dotted"></span>
                                    <span class="action-time">20:00</span>
                                    <span class="course-name">从大厂的面试题来看ThreadLocal重要性</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 internet-high-paying-jobs">
                        <a href="javascript:void(0);" class="w-100">
                            <img src="./images/0 (1).png" alt="" class="w-100">
                        </a>
                    </div>
                </div>
            </div>
            <!-- 官方推荐训练营课 -->
            <div class="container official-recommended-course">
                <div class="row justify-content-end d-flex align-items-center module-title">
                    <div class="col-md-8">
                        <h2 style="text-align: center;">官方推荐训练营课</h2>
                    </div>
                    <div class="col-md-2 d-flex justify-content-end">
                        <a href="javascript:void(0);" class="w-100 get-more">
                            更多<span class="iconfont icon-right-line"></span> 
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <ul class="kecheng-list d-flex flex-wrap">
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                            <li class="kecheng-item">
                                <a href="javascript:void(0);">
                                    <img src="./images/356.png" alt="">
                                    <h6 class="kecheng-title">三天学会Java开发超级玛丽</h6>
                                    <div class="schedule">
                                        进度：<span>4/24</span>节 | <span>小朋友学院</span>
                                    </div>
                                    <div>
                                        <span class="price">￥198.00</span>
                                        <span class="num-purchasers">764人已购买</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 查看Java开发类目全部共 800 门课程 -->
            <div class="container">
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center" style="border: 3px solid rgba(244,244,244,.9); padding: 10px; font-size: 1.4rem;">
                        <a href="javascript:void(0);" class="all-courses-java">
                            查看Java开发类目全部共 800 门课程<span class="iconfont icon-right-line"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="row related-links" style="padding-top: 20px;">
                <div class="col-md-12" style="margin: 30px 0 10px 0;">
                    <h5>合作链接</h5>
                </div>
                <div class="col-md-12">
                    <ul class="d-flex flex-wrap" style="border-bottom: .1px solid rgba(153,153,153,.2);padding-bottom:20px;">
                        <li>
                            <a href="javascript:void(0);">腾讯大学</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯网教育频道</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯精品课</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯云</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯企点</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯电脑管家</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯御安全</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">企鹅FM</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯微云</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯文档</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">腾讯游戏学院</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">环球网校</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">中华考试网</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">学神IT教育</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">云艺帆教育</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">为课网校</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">中大网校</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">益修学院</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">起点学院</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">人人都是产品经理</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">公务员考试网</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">新东方在线</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">中公公务员网</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">学科网</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">原画人</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">王羽课堂</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; margin-bottom: 40px;">
                    <img src="./images/页脚logo.png" alt="" title="腾讯课堂_专业的在线教育平台" style="width: 70px;">
                    <p style="font-size: .8rem;">Copyright © 2020 Tencent. All Rights Reserved.</p>
                    <ul class="d-flex web-site-protocol justify-content-center">
                        <li>深圳市腾讯计算机系统有限公司</li>
                        <li>版权所有</li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">腾讯课堂服务协议</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">隐私政策</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">站点地图</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">侵权投诉</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">问题反馈</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">帮助</a>
                        </li>
                        <li class="li-link-item">
                            <a href="javascript:void(0);">涨知识</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <script src="./scripts/jquery3.5.1.slim.min.js"></script>
    <script src="./scripts/popper1.16.0.min.js"></script>
    <script src="./scripts/bootstrap4.5.0.min.js"></script>
    <script src="./scripts/jQuery 3.5.1.min.js"></script>
    <script src="./scripts/base.js"></script>
</body>

</html>